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Introdução 


Princípios da Engenharia de Software, do livro 
de Robert C. Martin Código Limpo, adaptados 
para JavaScript. Isto não é um guia de estilos. 
É um guia para se produzir código legível, 
reutilizável e refatorável em JavaScript. 


Nem todo princípio demonstrado deve ser 
seguido rigorosamente, e ainda menos são os 
que possuem consenso universal. São 
orientações e nada mais, entretanto, foram 
usadas em código durante muitos anos de 
experiência coletiva pelos autores de Código 
limpo. 


Nosso ofício de engenharia de software tem 
pouco mais de 50 anos e ainda estamos 
aprendendo muito. Quando a arquitetura de 
software for tão velha quanto a própria 
arquitetura, talvez então tenhamos regras mais 
rígidas para seguir. Por enquanto, deixe que 
estas orientações sirvam como critério para se 


avaliar a qualidade de código JavaScript que 
tanto você e o seu time produzirem. 


Mais uma coisa: aprender isto não irá lhe 
transformar imediatamente em um 
desenvolvedor de software melhor e trabalhar 
com eles por muitos anos não quer dizer que 
você não cometerá erros. Toda porção de 
código começa com um rascunho, como argila 
molhada sendo moldada em sua forma final. 
Finalmente, talhamos as imperfeições quando 
revisamos com nossos colegas. Não se bata 
pelos primeiros rascunhos que ainda precisam 
de melhorias. Ao invés, bata em seu código. 


Variáveis 


Use nomes de variáveis que tenham 
significado e sejam pronunciáveis 


Ruim: 


const yyyymmadstr = moment().format(Y YYY/MM/DD'); 


Bom: 
const currentDate = moment().format('YYYY/MM/DD)); 


Use o mesmo vocabulário para o mesmo 
tipo de variável 


Ruim: 
getUserlnfo(); 
getClientData(); 


getCustomerRecord(); 


Bom: 
getUser(); 
Use nomes pesquisáveis 


Nós iremos ler mais código que escrever. É 
importante que o código que escrevemos seja 
legível e pesquisável. Não dando nomes em 
variáveis que sejam significativos para 
entender nosso programa, machucamos 


nossos leitores. Torne seus nomes 
pesquisáveis. Ferramentas como buddy.js e 
ESLint podem ajudar a identificar constantes 
sem nome. 


Ruim: 


/! Para que diabos serve 86400000? 
setTimeout(blastOff, 86400000); 


Bom: 


/| Declare-as como “const” global em letras maiúsculas. 
const MILLISECONDS IN A DAY = 86400000; 


setTimeout(blastOff, MILLISECONDS IN A DAY); 


Use variáveis explicativas 
Ruim: 


const address = 'One Infinite Loop, Cupertino 95014'; 
const cityZipCodeRegex = /"[" M+[ Mis]+H(.+? s*(d(5)?$/; 
saveCityZipCode(address.match(cityZipCodeRegex)[1], 
address.match(cityZipCodeRegex)[2]); 


Bom: 


const address = 'One Infinite Loop, Cupertino 95014; 

const cityZipCodeRegex = /"[" W+[ Mis]+(.+?s*(1d(5))?S/; 
const [, city, zipCode] = address.match(cityZipCodeRegex) || []; 
saveCityZipCode(city, zipCode); 


Evite Mapeamento Mental 
Explícito é melhor que implícito. 
Ruim: 


const locations = ['Austin', 'New York”, 'San FranciscoY; 
locations.forEach((I) => ( 

doStuff(); 

doSomeOtherStuff(); 

Na 

nina 

Re 

/| Espera, para que serve o "|" mesmo? 

dispatch(I); 
ne 


Bom: 


const locations = ['Austin', 'New York”, 'San FranciscoY; 
locations.forEach((location) => ( 

doStuff(); 

doSomeOtherStuff(); 

Res 

lies 

as 

dispatch(location); 


D; 


Não adicione contextos desnecessários 


Se o nome de sua classe/objeto já lhe diz 
alguma coisa, não as repita nos nomes de 
suas variáveis. 


Ruim: 


const Car = ( 
carMake: 'Honda', 
carModel: 'Accord', 
carColor: 'Blue' 


>; 


function paintCar(car) ( 
car.carColor = 'Red'; 


) 
Bom: 


const Car = ( 
make: 'Honda', 
model: 'Accord', 
color: 'Blue' 


m 


function paintCar(car) ( 
car.color = 'Red!; 


) 


Use argumentos padrões ao invés de curto 
circuitar ou usar condicionais 


Argumentos padrões são geralmente mais 
limpos do que curto circuitos. Esteja ciente que 
se você usá-los, sua função apenas irá 
fornecer valores padrões para argumentos 
undefined. Outros valores "falsos" como *, "”, 
false, null, O, e NaN, não serão substituidos 


por valores padrões. 
Ruim: 


function createMicrobrewery(name) ( 
const brewery Name = name || 'Hipster Brew Co.'; 
a 


) 
Bom: 


function createMicrobrewery(brewery Name = 'Hipster Brew Co.” ( 
NE 


) 


Funções 


Argumentos de funções (idealmente 2 ou 
menos) 


Limitar a quantidade de parâmetros de uma 
função é incrivelmente importante porque 
torna mais fácil testá-la. Ter mais que três leva 
a uma explosão combinatória onde você tem 
que testar muitos casos diferentes com cada 
argumento separadamente. 


Um ou dois argumentos é o caso ideal, e três 
devem ser evitados se possível. Qualquer 
coisa a mais que isso deve ser consolidada. 
Geralmente, se você tem mais que dois 
argumentos então sua função está tentando 
fazer muitas coisas. Nos casos em que não 
está, na maioria das vezes um objeto é 
suficiente como argumento. 


Já que JavaScript lhe permite criar objetos 
instantaneamente, sem ter que escrever muita 
coisa, você pode usar um objeto se você se 
pegar precisando usar muitos argumentos. 


Para tornar mais óbvio quais as propriedades 
que as funções esperam, você pode usar a 

sintaxe de desestruturação (destructuring) do 
ES2015/ES6. Ela possui algumas vantagens: 


1. Quando alguém olha para a assinatura de 
uma função, fica imediatamente claro quais 
propriedades são usadas. 


2. Desestruturação também clona os valores 
primitivos específicos do objeto passado como 
argumento para a função. Isso pode ajudar a 
evitar efeitos colaterais. Nota: objetos e 
vetores que são desestruturados a partir do 
objeto passado por argumento NÃO são 
clonados. 


3. Linters podem te alertar sobre propriedades 
não utilizadas, o que seria impossível sem 
usar desestruturação. 


Ruim: 


function createMenu(title, body, button Text, cancellable) ( 
Ni 


) 
Bom: 


function createMenu(( title, body, buttonText, cancellable 3) ( 
ias 


) 


createMenu(( 
title: 'Foo', 
body: 'Bar', 
buttonText: 'Baz', 
cancellable: true 


na 


Funções devem fazer uma coisa 


Essa é de longe a regra mais importante em 
engenharia de software. Quando funções 
fazem mais que uma coisa, elas se tornam 
difíceis de serem compostas, testadas e 
raciocinadas. Quando você pode isolar uma 
função para realizar apenas uma ação, elas 
podem ser refatoradas facilmente e seu código 
ficará muito mais limpo. Se você não levar 
mais nada desse guia além disso, você já 
estará na frente de muitos desenvolvedores. 


Ruim: 


function parseBetterJSAlternative(code) ( 
const REGEXES = [ 
VER 


]; 


const statements = code.split(' '); 
const tokens = []; 
REGEXES .forEach((REGEX) => ( 
statements.forEach((statement) => ( 
Ma 
»; 
»; 


const ast = []; 
tokens.forEach((token) => ( 
Il lex... 


D); 


ast.forEach((node) => ( 
|! parse... 


b; 


Bom: 


function tokenize(code) ( 
const REGEXES = | 
VER 


]; 


const statements = code.split(' '); 
const tokens = []; 
REGEXES .forEach((REGEX) => ( 
statements.forEach((statement) => ( 
tokens.push( /* ... */); 
»); 
»); 


return tokens; 


) 


function lexer(tokens) ( 
const ast = []; 
tokens.forEach((token) => ( 
ast.push(/*... */); 
»); 


return ast; 


) 


function parseBetterJSAlternative(code) ( 
const tokens = tokenize(code); 
const ast = lexer(tokens); 
ast.forEach((node) => ( 
|| parse... 
»; 
) 


Funções devem ter apenas um nível 
de abstração 


Quando você tem mais de um nível de 
abstração sua função provavelmente esta 
fazendo coisas demais. Dividir suas funções 
leva a reutilização e testes mais fáceis. 


Ruim: 


function parseBetterJSAlternative(code) ( 
const REGEXES = [ 
VER 


]; 


const statements = code.split(' '); 
const tokens = []; 
REGEXES .forEach((REGEX) => ( 
statements.forEach((statement) => ( 
Ma 
»; 
»; 


const ast = []; 
tokens.forEach((token) => ( 
Il lex... 


D); 


ast.forEach((node) => ( 
|! parse... 


b; 


Bom: 


function tokenize(code) ( 
const REGEXES = | 
VER 


]; 


const statements = code.split(' '); 
const tokens = []; 
REGEXES .forEach((REGEX) => ( 
statements.forEach((statement) => ( 
tokens.push( /* ... */); 
»); 
»); 


return tokens; 


) 


function lexer(tokens) ( 
const ast = []; 
tokens.forEach((token) => ( 
astpushes 
»); 


return ast; 


) 


function parseBetterJSAlternative(code) ( 
const tokens = tokenize(code); 
const ast = lexer(tokens); 
ast.forEach((node) => ( 
|| parse... 
»; 
) 


Remova código duplicado 


Faça absolutamente seu melhor para evitar 
código duplicado. Código duplicado quer dizer 
que existe mais de um lugar onde você deverá 
alterar algo se precisar mudar alguma lógica. 


Imagine que você é dono de um restaurante e 
você toma conta do seu estoque: todos os 
seus tomates, cebolas, alhos, temperos, etc. 
Se você tem multiplas listas onde guarda estas 
informações, então você terá que atualizar 
todas elas quando servir um prato que tenha 
tomates. Se você tivesse apenas uma lista, 
teria apenas um lugar para atualizar! 


Frequentemente, você possui código 
duplicado porque você tem duas ou mais 
coisas levemente diferentes, que possuem 
muito em comum, mas suas diferenças lhe 
forçam a ter mais duas ou três funções que 
fazem muito das mesmas coisas. Remover 
código duplicado significa criar uma abstração 
que seja capaz de lidar com este conjunto de 


coisas diferentes com apenas uma 
função/módulo/classe. 


Conseguir a abstração correta é crítico, por 
isso que você deveria seguir os princípios 
SOLID descritos na seção Classes. 
Abstrações ruins podem ser piores do que 
código duplicado, então tome cuidado! Dito 
isto, se você puder fazer uma boa abstração, 
faça-a! Não repita a si mesmo, caso contrário 
você se pegará atualizando muitos lugares 
toda vez que precisar mudar qualquer 
coisinha. 


Ruim: 


function showDeveloperList(developers) ( 
developers.forEach((developer) => ( 
const expectedSalary = developer.calculateExpectedSalary(); 
const experience = developer.getExperience(); 
const githubLink = developer.getGithubLink(); 
const data = ( 
expectedSalary, 
experience, 
githubLink 
Ê 


render(data); 
); 
) 


function showManagerList(managers) ( 
managers.forEach((manager) => ( 
const expectedSalary = manager.calculateExpectedSalary(); 
const experience = manager.getExperience(); 
const portfolio = manager.getMBAProjects(); 
const data = ( 
expectedSalary, 
experience, 
portfolio 


X 


render(data); 
); 
) 


Bom: 


function showEmployeeList(employees) ( 
employees.forEach((employee) => ( 
const expectedSalary = employee.calculateExpectedSalary(); 
const experience = employee.getExperience(); 


const data = ( 
expectedSalary, 
experience 


X 


switch(employee.type) 
case 'manager': 
data.portfolio = employee.getMBAProjects(); 
break; 
case 'developer": 
data.githubLink = employee.getGithubLink(); 
break; 


) 


render(data); 
); 
) 


Defina (set) objetos padrões com 
Object.assign 


Ruim: 


const menuConfig = ( 
title: null, 

body: 'Bar', 
buttonText: null, 
cancellable: true 


; 


function createMenu(config) ( 
config.title = config.title || "Foo"; 
config.body = config.body || 'Bar”; 
config.buttonText = config.buttonText || 'Baz'; 
config.cancellable = config.cancellable !== undefined ? config.cancellable : true; 


) 


createMenu(menuConfig); 


Bom: 


const menuConfig = ( 
title: "Order, 
/! Usuário não incluiu a chave 'body' 
buttonText: 'Send!', 
cancellable: true 


x 


function createMenu(config) ( 
config = Object.assign(( 
title: "Foo", 
body: 'Bar', 
buttonText: 'Baz', 
cancellable: true 
), config); 


/! configuração agora é: (title: "Order", body: "Bar", buttonText: "Send", cancellable: true) 
Mec 
) 


createMenu(menuConfig); 


